<template>
    <div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <!-- 餐桌信息tab -->
            <el-tab-pane label="餐桌信息" name="first">
                <div id="lll_search">
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-input v-model="input" placeholder="请输入餐桌台号"></el-input>
                </div>
                <!-- 餐桌信息表格 -->

                <el-table
                        :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                        :cell-style="{textAlign:'center'}"
                        :data="currentData"
                        border style="width: 100%">
                    <el-table-column prop="id" label="餐桌台号" width="180"></el-table-column>
                    <el-table-column prop="table" label="餐桌座位数" width="180"></el-table-column>
                    <el-table-column prop="type" label="餐桌类型"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 餐桌信息分页 -->
                <div id="lll_pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="pageNum"
                            :page-size="6"
                            :pager-count="7"
                            @current-change="changePage"
                            :current-page="currentPage"
                    ></el-pagination>
                </div>
                <!-- 修改框 -->
                <el-dialog title="修改餐桌信息" :visible.sync="dialogFormVisible" width="30%">
                    <el-form :model="form">
                        <el-form-item label="餐桌号码:" :label-width="formLabelWidth">
                            <el-input v-model="form.id" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="可就餐人数:" :label-width="formLabelWidth">
                            <el-input v-model="form.table" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="餐桌类型:" :label-width="formLabelWidth">
                            <el-select v-model="form.type" placeholder="请选择餐桌类型">
                                <el-option label="大厅" value="大厅"></el-option>
                                <el-option label="包间" value="包间"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="changeMsgLll">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 删除框 -->
                <el-dialog
                        title="删除餐桌信息"
                        :visible.sync="dialogVisible"
                        width="20%"
                        :before-close="handleClose"
                >
                    <span>确认删除吗？</span>
                    <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            <el-button type="danger" @click="dialogVisible = false">删除</el-button>
          </span>
                </el-dialog>
            </el-tab-pane>

            <!-- 新增餐桌tab -->
            <el-tab-pane label="新增餐桌" name="second" id="createTable">
                <el-form ref="form" :model="form" label-width="200px">
                    <el-form-item label="餐桌台号">
                        <el-input v-model="form.id"></el-input>
                    </el-form-item>
                    <el-form-item label="餐桌座位数">
                        <el-input v-model="form.table"></el-input>
                    </el-form-item>
                    <el-form-item label="餐桌类型">
                        <el-input v-model="form.type"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import axios from "../../http/http";
    import {mapActions, mapState} from "vuex";

    export default {
        name: "lll_czgl",
        // 页面数据
        data() {
            return {
                // 默认的tab
                activeName: "first",
                input: "",
                currentPage: 1,
                dialogVisible: false, //删除
                // 修改
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: "" || 0,
                    table: "" || 0,
                    type: "" || "大厅"
                },
                formLabelWidth: "120px",
                //当前数据
                currentRow: undefined
            };
        },
        methods: {
            //quren修改
            changeMsgLll() {
                this.dialogFormVisible = false;
                this.$store.state.lll_canzhouStore.lll_tableData.map(item => {
                    if (item === this.currentRow) {
                        item=this.form
                    }
                });
            },
            // tab跳转
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            ...mapActions(["lll_getCanZhuoData"]),
            changePage(val) {
                // 当前页数
                // console.log(val);
                this.currentPage = val;
            },
            // 修改
            handleEdit(index, item) {
                // console.log(index);
                //console.log(item);
                this.dialogFormVisible = true;
                this.form.id = item.id;
                this.form.table = item.table;
                this.form.type = item.type;
                this.currentRow = item;
            },
            // 删除
            handleDelete(index, item) {
                console.log(index);
                console.log(item);
                this.dialogVisible = true;
                this.currentRow = item;
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            // 新增餐桌
            onSubmit() {
                console.log('submit!');
            }

        },
        computed: {
            // 当前页数据
            currentData() {
                let kaishi = (this.currentPage - 1) * 6;
                let jieshu = (this.currentPage - 1) * 6 + 6;
                return this.$store.state.lll_canzhouStore.lll_tableData.slice(
                    kaishi,
                    jieshu
                );
            },
            // 总数据
            pageNum() {
                return this.$store.state.lll_canzhouStore.lll_tableData.length;
            }
        },
        created() {
            this.lll_getCanZhuoData().then(res => {
                //console.log(res);
            });
        }
    };
</script>

<style scoped lang="less">
    .el-table {

    }

    #lll_search {
        width: 100%;
        height: 44px;
        padding-top: 25px;
        padding-bottom: 35px;

        .el-input {
            float: right;
            width: 300px;
        }

        .el-button {
            float: right;
            height: 40px;
            margin-right: 40px;
            margin-left: 40px;
        }
    }

    #createTable {
        .el-form {
            width: 600px;
            margin-top: 100px;

            .el-form-item {
                height: 50px;
            }

            .el-button {
                margin: 0 10px;
            }
        }

        #lll_pagination {
            width: 100%;
            height: 100px;
            padding: 20px;

        }

    }
</style>
